<template>
  <div class="home">
    <div class="header">
      <div class="header-left">JYeontu</div>
      <div class="header-right">
        <span class="btn">首页</span>
        <span class="btn">关于</span>
      </div>
    </div>
    <div class="main">
      <div class="main-left">
        <titleList :list="articleList"></titleList>
      </div>
      <div class="main-right">
        <div class="main-right-item">
          <typePool :list="typeList"></typePool>
        </div>
        <div class="main-right-item">目录</div>
        <div class="main-right-item">友链</div>
        <div class="main-right-item">项目介绍</div>
      </div>
    </div>
  </div>
</template>

<script>
import { titleList, typePool } from "../components/index";
export default {
  name: "HomeView",
  components: {
    titleList,
    typePool,
  },
  data() {
    return {
      typeList: [],
      articleList: [],
      articleMap: {},
      type: "测试",
      blogDir:
        "https://gitee.com/api/v5/repos/zheng_yongtao/md-blog-store/contents/blog",
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async getTypeList() {
      const typeList = await axios.get(this.blogDir);
      this.articleMap = {};
      for (const type of typeList) {
        this.articleMap[type.name] = [];
      }
      this.typeList = typeList.map((item) => {
        return { name: item.name };
      });

      for (const item of this.typeList) {
        const articles = await axios.get(this.blogDir + "/" + item.name);
        item.nums = articles.length;
        this.articleMap[item.name] = articles.map((article) => {
          return article.name;
        });
      }
      this.articleList = this.articleMap[this.type];
    },
    async fetchData() {
      this.getTypeList();
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 95vw;
  height: 95vh;
  border: solid 1px black;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.2rem;
  cursor: pointer;
  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    display: none;
  }
  * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .header {
    height: 8%;
    display: flex;
    &-left {
      font-size: 0.5rem;
      font-family: fantasy;
    }
    &-right {
      font-size: 0.4rem;
      font-weight: bold;
      margin-left: auto;
      margin-right: 2em;
      .btn {
        padding: 0.1rem;
      }
    }
  }
  .main {
    height: 97%;
    display: flex;
    &-left {
      width: 70%;
      height: 92%;
      overflow-y: scroll;
      border: solid 1px sandybrown;
      margin: 0 auto;
    }
    &-right {
      margin-left: auto;
      margin-right: 0.4rem;
      width: 20%;
      height: 92%;
      overflow-y: scroll;
      border: solid 1px sandybrown;
      &-item {
        height: 50%;
        border: solid 1px sandybrown;
      }
    }
  }
}
</style>
